<template>
	<view class="u-f">
		
		<view class="menu" :style="getHeight">
			<view class="list u-f-ajc" 
			:class="{active:index==curMenu}"
			v-for="(item,index) in menuList" :key="index"
			@click="curMenu = index"
			>
				<view class="icon">
					<u-icon :name="item.icon" size="46rpx" color="#909090"></u-icon>
				</view>
			</view>
		</view>
		
		<view class="main" :style="getMinHeight">
			
			<view v-show="curMenu==0">
				<!-- 笔记内容 -->
				<details-gift @changeShare="changeShareList" @addShare="curMenu=3" :list="note.sharelist.data" @deleteShare="deleteShareChange" />
			</view>
			
			<view v-show="curMenu==1">
				<!-- 笔记内容 -->
				<details-info :note="note" />
				
			</view>
			
			<view v-show="curMenu==2">
				<!-- 笔记附加账号信息 -->
				<details-userlist :list="note.userlist.data" />
			</view>
			
			<view v-show="curMenu==3">
				<details-addshare 
				ref="shareAdd"
				:nid="nid" 
				:note="note"
				:shareCoverList="shareCoverList"
				@changeShare="changeShare"
				/>
			</view>
		</view>
		
	</view>
</template>

<script>
	
	// 导入组件
	import detailsUserlist from './components/details-userlist'
	import detailsInfo from './components/details-info'
	import detailsAddshare from './components/details-addshare'
	import detailsGift from './components/details-gift'
	
	// 导入方法
	import { detailsNote , addNoteShare } from '@/http/api'
	
	export default {
		components:{ detailsUserlist , detailsInfo , detailsAddshare , detailsGift },
		data() {
			return {
				// 当前笔记ID
				nid:null,
				// 分享封面列表
				shareCoverList: [],
				// 笔记数据容器
				note:{
					// 账号数据
					userlist:{
						data:[]
					},
					// 分享记录
					sharelist:{
						data:[]
					}
				},
				// 默认选中导航
				curMenu:1,
				// 导航列表
				menuList:[
					{name:'记录',icon:'gift'},
					{name:'笔记',icon:'order'},
					{name:'账号',icon:'list'},
					{name:'分享',icon:'share-square'}
				],
				// 分享数据
				shareData:{},
				// 是否需要重新获取数据
				isRef:false
			}
		},
		// 转发
		async onShareAppMessage() {
			return {
			  title: this.shareData.title,
			  path: '/pages/note/share?id='+this.shareData.id,
			  imageUrl:this.shareData.cover
			}
		},
		async onLoad(data) {
			this.nid = data.id
			this.detailsNote()
		},
		onUnload(){
			this.isRef = true
		},
		onShow() {
			if(this.isRef)this.detailsNote()
		},
		methods: {
			// 笔记内容
			async detailsNote(offon=false){
				uni.showLoading({title:'获取中...',mask:true})
				// 请求服务器
				let res = await detailsNote(this.nid)
				uni.hideLoading()
				// 检查返回结果
				if(res.code){
					if(offon){
						this.note.sharelist = res.data.sharelist
					}else{
						this.note = res.data
						this.shareCoverList = res.data.sharecover
						this.$refs.shareAdd.init()
					}
					
				}else{
					return uni.showModal({title: '错误提示',content: '暂时无法获取此笔记',showCancel: false,success: res => {uni.navigateBack({delta:1})}});
				}
			},
			// 分享礼包制作结果监听
			changeShare(e){
				this.shareData = e
				this.detailsNote(true)
			},
			// 礼包列表分享监听
			async changeShareList(e){
				this.shareData = e
			},
			// 礼包删除
			deleteShareChange(index){
				this.note.sharelist.data.splice(index,1)
			}
		}
	}
</script>

<style scoped lang="scss">
.menu{
	position: fixed;
	left: 0;
	// #ifdef MP
	top: 0;
	// #endif
	// #ifndef MP
	top: 44px;
	// #endif
	width: 100rpx;
	background-color: #f5f5f5;
	.list{
		height: 80rpx;
		font-size: 24rpx;
		color: #4b4b44;
		margin: 30rpx 0;
	}
	.active{
		position: relative;
		background-color: white;
		border-radius: 60rpx 0 0 60rpx;
	}
}

.main{
	margin-left: 100rpx;
	width: 650rpx;
	border-radius: 10rpx 10rpx 0 0;
	overflow: hidden;
	background-color: white;
	min-height: 100%;
}
</style>
